<template>
<div>
  <!--  面包屑-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    <el-breadcrumb-item>角色列表</el-breadcrumb-item>
  </el-breadcrumb>

  <!--  卡片区域-->
  <el-card class="box-card">
    <el-form-item >
      <el-button type="primary" @click="addRolesVisible=true">添加角色</el-button>
    </el-form-item >



    <!--   表格数据-->
    <el-table
      :data="rolesList"
      border
      stripe
      style="width: 100%"
      max-height="650">
      <el-table-column type="expand">
        <template >
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span></span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span></span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
<!--    type="index"  默认从1开始-->
      <el-table-column
        type="index"
        label="#">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称">
      </el-table-column>
      <el-table-column
        prop="roleDesc"
        label="角色描述">
      </el-table-column>
      <el-table-column
        label="操作"  >
        <template  v-slot="mySlot" >
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <el-button  type="primary" icon="el-icon-search" @click="editDialog(mySlot.row.id)">编辑</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">

            <el-button type="danger" icon="el-icon-delete" @click="delDialog(mySlot.row)">删除</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="分配权限" placement="top">
            <el-button type="warning" icon="el-icon-setting" >分配权限</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!--    删除角色的弹框-->
    <el-dialog
      title="提示"
      v-model="delDialogVisible"
      width="50%"
      center>
      <span>您确定要删除{{roleName}}角色吗</span>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="delDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="del">确定</el-button>
    </span>
      </template>

    </el-dialog>


    <!--    添加弹框-->
    <el-dialog title="添加角色" v-model="addRolesVisible" width="50%">
      <el-form :model="rolesForm" status-icon :rules="rules" ref="rolesForm"
               class="demo-ruleForm" label-width="70px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="rolesForm.roleName" ></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="rolesForm.roleDesc" ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="resetForm('rolesForm')">取 消</el-button>
      <el-button type="primary" @click="addRoles('rolesForm')">确 定</el-button>
    </span>
      </template>
    </el-dialog>

    <!--    编辑角色的弹框-->
    <el-dialog title="修改角色" v-model="editDialogVisible" width="50%">
      <el-form :model="updateForm" status-icon :rules="rules" ref="updateForm"
               class="demo-ruleForm" label-width="70px">
        <el-form-item label="角色名称" prop="roleName" >
          <el-input v-model="updateForm.roleName" ></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="updateForm.roleDesc" ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="editDialogVisible=false">取 消</el-button>
      <el-button type="primary" @click="edit">确 定</el-button>
    </span>
      </template>
    </el-dialog>
  </el-card>
</div>
</template>

<script>
import {ElMessage} from "element-plus"

export default {
name: "roles",
  data(){
  return{
    addRolesVisible:false,
    delDialogVisible:false,
    editDialogVisible:false,
    rolesList:[],
    rolesForm: {
      roleName:'',
      roleDesc:''
    },
    rules:{
      roleName:[
        {required:true,message:'请输入角色名称',trigger:'blur'}
      ],
      roleDesc:[
        {required:true,message:'请输入角色描述',trigger:'blur'}
      ]
    },
    updateForm:{
    },
    roleId:'',
    roleName:''

  }
  },
  created() {
    this.getAllRoles();
  },
  methods:{
  //获取所有数据
    getAllRoles(){
      this.axios.get('roles').then(resp=>{
        console.log(resp);
        if(resp.data.meta.status!=200) return ;

        //直接赋值
        this.rolesList=resp.data.data;
      }).catch(err=>{
        console.log(err);
      })

    },
    //添加角色
    addRoles(formName){
      this.axios.post('roles',this.rolesForm).then(data=>{
        console.log(data);
        if(data.data.meta.status !==201) return ElMessage.error('添加失败');
        ElMessage.success('添加成功');
        this.resetForm(formName);
        this.getAllRoles();//重新获取数据
      }).catch(err=>{
        console.log(err);
      });
    },
    //修改数据
    editDialog(id){
      this.editDialogVisible = true;
      this.roleId =id;
      this.axios.get(`roles/${this.roleId}`).then(resp=>{
        this.updateForm =resp.data.data
      }).catch(err=>{
        console.log(err);
      })
    },

    edit(){
      //修改用户数据
      this.axios.put(`roles/${this.roleId}`,{
        roleName:this.updateForm.roleName,
        roleDesc:this.updateForm.roleDesc
      }).then(resp=>{
        if(resp.data.meta.status !==200) return ElMessage.error('修改失败');
        ElMessage.success('修改成功');
        this.editDialogVisible = false ;
        this.getAllRoles();
      }).catch(err=>{
        console.log(err);
      })
    },

  //删除数据
    delDialog(row){
      this.roleId=row.id;
      this.roleName = row.roleName;
      this.delDialogVisible = true;
    },

    del(){
      this.axios.delete(`roles/${this.roleId}`).then(resp=>{
        if(resp.data.meta.status !==200) return ElMessage.error('删除失败');
        ElMessage.success('删除成功');
        this.delDialogVisible = false ;
        this.getAllRoles();
      }).catch(err=>{
        console.log(err);
      })
    },
    //关闭表单所做的事情
    resetForm(formName){
      this.$refs[formName].resetFields();
      this.addRolesVisible=false;
    }
  }
}
</script>

<style scoped>
.el-breadcrumb{
  font-size: 20px;
}

.box-card{
  margin-top: 20px;
}
.el-pagination{
  margin-top: 10px;
}
</style>
